<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>webgl</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
</head>

<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <script src='../static/js/three.js'></script>

  <script>
    // 创建场景
    const scene = new THREE.Scene();

     // 创建相机
     const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) //透视相机

      // 渲染

     const renderer = new THREE.WebGLRenderer()

     renderer.setSize(window.innerWidth, window.innerHeight)

     document.body.appendChild(renderer.domElement)

     const geometry = new THREE.CubeGeometry(1, 1, 1)

     const material = new THREE.MeshBasicMaterial({ color: 0x00ff00})

     const cube = new THREE.Mesh(geometry, material)
     scene.add(cube);
     camera.position.z = 5;

     function render () {
      requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
     }
     render()
  </script>
</body>

</html>